<template>
    <nav class="nav-box">
      <div class="nav-input">
        <input id="userInput" type="text" @focus="flag=true" @blur="chengSearch" v-model="search">
      </div>
      <div id="seachBtn" class="nav-btn" v-show="flag" @mousedown="searchFilm()">
        <span>搜索</span>
      </div>
    </nav>  
</template>

<script>
export default {
    data(){
        return {
            flag:false,
            search:''
        }
    },
    methods:{
        chengSearch(){
            this.flag=false
            this.search=''
        },
        searchFilm(){
            if(this.search!=''){
                //携带参数search
            this.$router.push(`/films?search=${this.search}`)
                // this.$root.$emit("updateSearch",this.search)
                // this.$emit("updateSearch",this.search)
            }
        }
    }
}
</script>

<style lang="less" scoped>
.nav-box{
    height: @topHeight;
    line-height: @topHeight;
    background-color: @white;
    border-bottom: 1px solid @gray-light;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    box-sizing: border-box;
    >.nav-input{
        flex-grow: 3;
        padding: 0rem 0.2rem;
        box-sizing: border-box;
        >input[type="text"]{
            box-sizing: border-box;
            width: 100%;
            padding: 0rem 0.1rem;
            height: @topHeight - 0.4rem;
            border: none;
            outline: none;
            background-image:url(../assets/search.png);
            background-repeat: no-repeat;
            background-position: center;
            background-size: 0.4rem;
            background-color: @gray-ee;
            border-radius: 0.1rem;
            &:focus{
                background-image: none;
                border: 1px solid @blue;
            }
        }
    }
    >.nav-btn{
        flex-grow: 1;
        text-align: center;
        color: @blue;
        cursor: pointer;
        font-size: 0.36rem;
        // display: none;
    }
}
</style>
